/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = '伊夕'
const list = document.querySelector('.list')
const btn = document.querySelector('.btn ')

const btnDismiss = document.querySelector('.modal-footer .btn-primary')
const add_btn = document.querySelector('.add-btn')
const del = document.querySelector('.del')
const edit_btn= document.querySelector('.edit-btn');
const edit_form= document.querySelector('.edit-form');
// 添加弹窗控制
const addModal = new bootstrap.Modal(document.querySelector('.add-modal'))

// 编辑弹窗
const editModal = new bootstrap.Modal(document.querySelector('.edit-modal'))

// 渲染函数
function render(){
axios({
    url:'http://hmajax.itheima.net/api/books',
    params:{
      creator
    }
  }).then(res=>{
      const{data:{data}}=res
      list.innerHTML= data.map(item=>{
        const {id,bookname,author,publisher}=item
      
        return `     <tr>
        <td>${id}</td>
        <td>${bookname}</</td>
        <td>${author}</</td>
        <td>${publisher}</</td>
        <td data-id=${id}>
          <span class="del">删除</span>
          <span class="edit">编辑</span>
        </td>
      </tr>`
      }).join('')
  })
}
render()
btn.addEventListener('click',function(){
  addModal.show()
 
})
add_btn.addEventListener('click',function(){
  const add_form= document.querySelector('.add-form');
  const data=serialize(add_form,{hash:true,empty:true})
  console.log(data);
  axios({
    url:'http://hmajax.itheima.net/api/books',
    method:'POST',
    data:{
      creator,
      ...data
    }
  }).then(res=>{
    render()
    addModal.hide()
    add_form.reset()
 
  }).catch(error=>{
    console.log(error.response);
  })

})
list.addEventListener('click',function(e){
  if(!e.target.classList.contains('del')) {
      return 
  }
  // const id =.dataset.id
  const id=e.target.parentNode.dataset.id
  axios.delete(`http://hmajax.itheima.net/api/books/${id}`).then(res=>{
    render()
  })
 
})
// 编辑
list.addEventListener('click',function(e){

  if(!e.target.classList.contains('edit')){
    return
  }
  const id=e.target.parentNode.dataset.id
  axios.get(`http://hmajax.itheima.net/api/books/${id}`).then(res=>{
    const {data:{data}}=res
    Object.keys(data).forEach(item=>{
      document.querySelector(`.edit-form .${item}`).value=data[item]
      
    })
  })
  editModal.show()

})

// 修改
edit_btn.addEventListener('click',function(){
 
  const {id,bookname,author,publisher}=serialize(edit_form,{hash:true,empty:true})
  
  axios.put(`http://hmajax.itheima.net/api/books/${id}`,{
    bookname,
    author,
    publisher,
    creator
  }).then(res=>{
    
    render()
    editModal.hide()
  })
})



/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */

/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */

/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */
